<template>
	<div class="edit-info">
		<van-nav-bar
			title="编辑画像"
			left-arrow
			@click-left="
				() => {
					$router.replace('/detail');
				}
			"
		/>
		<van-form @submit="onSubmit">
			<van-field
				v-model="name"
				name="姓名"
				label="姓名"
				placeholder="姓名"
				required
				:rules="[
					{
						required: true,
						message: '请输入客户姓名'
					}
				]"
			/>
			<van-field name="radio" label="性别">
				<template #input>
					<van-radio-group v-model="gender" direction="horizontal">
						<van-radio :name="1">男</van-radio>
						<van-radio :name="2">女</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field v-model="age" type="digit" maxlength="3" name="年龄" label="年龄" placeholder="年龄" />
			<van-field readonly clickable name="calendar" :value="birthday" label="生日" placeholder="点击选择日期" @click="showDate = true" />
			<van-popup v-model="showDate" position="bottom">
				<van-datetime-picker
					v-model="date"
					@confirm="onBirthday"
					@cancel="
						() => {
							showDate = false;
							date = new Date(birthday);
						}
					"
					type="date"
					title="选择年月日"
					:min-date="minDate"
					:max-date="maxDate"
				/>
			</van-popup>
			<van-field readonly clickable name="area" :value="area" label="区域" placeholder="点击选择省市区" @click="showArea = true" />
			<van-popup v-model="showArea" position="bottom"><van-area :area-list="areaList" @confirm="onArea" @cancel="showArea = false" /></van-popup>
			<van-field v-model="address" name="地址" label="地址" placeholder="地址" />
			<van-field readonly clickable name="picker" :value="industry.name" label="行业" placeholder="点击选择行业" @click="showIndustry = true" />
			<van-popup v-model="showIndustry" position="bottom">
				<van-picker value-key="name" show-toolbar :columns="industryList" @confirm="onIndustry" @cancel="showIndustry = false" />
			</van-popup>
			<van-field v-model="company" name="公司" label="公司" placeholder="公司" />
			<van-field v-model="income" name="年收入" label="年收入" placeholder="年收入" />
			<van-field v-model="hobby" name="爱好" label="爱好" placeholder="爱好" />
			<van-field
				v-model="wechat"
				name="微信号"
				label="微信号"
				placeholder="微信号"
				:rules="[
					{
						validator: (value, rule) => {
							if (value) {
								if (/^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/.test(value)) {
									return true;
								} else {
									return false;
								}
							} else {
								return true;
							}
						},
						message: '微信号格式有误'
					}
				]"
			/>
			<van-field
				v-model="mobile"
				type="tel"
				maxlength="11"
				name="手机号"
				label="手机号"
				placeholder="手机号"
				:rules="[
					{
						validator: (value, rule) => {
							if (value) {
								if (/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
									return true;
								} else {
									return false;
								}
							} else {
								return true;
							}
						},
						message: '手机号格式有误'
					}
				]"
			/>
			<van-field
				v-model="qq"
				type="digit"
				maxlength="12"
				name="QQ"
				label="QQ"
				placeholder="QQ"
				:rules="[
					{
						validator: (value, rule) => {
							if (value) {
								if (/^[1-9][0-9]{4,10}$/.test(value)) {
									return true;
								} else {
									return false;
								}
							} else {
								return true;
							}
						},
						message: 'QQ格式有误'
					}
				]"
			/>
			<van-field
				v-model="email"
				name="邮箱"
				label="邮箱"
				placeholder="邮箱"
				:rules="[
					{
						validator: (value, rule) => {
							if (value) {
								if (/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(value)) {
									return true;
								} else {
									return false;
								}
							} else {
								return true;
							}
						},
						message: '邮箱格式有误'
					}
				]"
			/>
			<van-field readonly clickable name="picker" :value="intent.name" label="客户意向" placeholder="点击选择客户意向" @click="showIntention = true" />
			<van-popup v-model="showIntention" position="bottom">
				<van-picker show-toolbar value-key="name" :columns="intention" @confirm="onIntention" @cancel="showIntention = false" />
			</van-popup>
			<van-field v-model="note" name="备注" label="备注" placeholder="备注" />
			<van-field name="uploader" label="照片">
				<template #input>
					<van-uploader v-model="uploader" @delete="uploadDelete" :max-count="1" :after-read="afterUpload" />
				</template>
			</van-field>
			<div style="margin: 16px auto;width: 60%;"><van-button round block color="#6881EC" native-type="submit">提交</van-button></div>
		</van-form>
	</div>
</template>

<script>
import { NavBar, Field, Form, RadioGroup, Radio, Button, Area, Calendar, Popup, Picker, Uploader, Toast, DatetimePicker } from 'vant';
import { areaList } from '@vant/area-data';
import { editPortrait } from '../../api/detail.js';
export default {
	components: {
		[NavBar.name]: NavBar,
		[Field.name]: Field,
		[Form.name]: Form,
		[RadioGroup.name]: RadioGroup,
		[Radio.name]: Radio,
		[Button.name]: Button,
		[Area.name]: Area,
		[Calendar.name]: Calendar,
		[Popup.name]: Popup,
		[Picker.name]: Picker,
		[Uploader.name]: Uploader,
		[Toast.name]: Toast,
		[DatetimePicker.name]: DatetimePicker
	},
	data() {
		return {
			name: '',
			gender: '',
			age: '',
			birthday: '',
			area: '',
			address: '',
			industry: {},
			company: '',
			income: '',
			hobby: '',
			wechat: '',
			mobile: '',
			qq: '',
			email: '',
			intent: {},
			note: '',
			photo: '',
			date: '',
			source: {},
			uploader: [],
			showDate: false,
			showArea: false,
			showSource: false,
			showIndustry: false,
			showIntention: false,
			sourceList: [],
			areaList,
			defaultDate: null,
			minDate: new Date(1990, 0, 1),
			maxDate: new Date(),
			industryList: [],
			intention: [
				{
					id: 1,
					name: '暂无意向'
				},
				{
					id: 2,
					name: '观望中'
				},
				{
					id: 3,
					name: '有意向'
				}
			]
		};
	},
	computed: {
		follow_remark_mobiles() {
			return this.$route.query.mobile;
		},
		follow_remark() {
			return this.$route.query.note;
		}
	},
	created() {
		document.title = '编辑画像';
		this.industryList = JSON.parse(sessionStorage.getItem('industry'));
		this.userInfo = JSON.parse(sessionStorage.getItem('portrait'));
		this.setInfo();
	},
	methods: {
		setInfo() {
			this.name = this.userInfo.name;
			this.gender = this.userInfo.gender;
			this.age = this.userInfo.age;
			this.birthday = this.userInfo.birthday;
			this.area = this.userInfo.area;
			this.address = this.userInfo.address;
			if (this.userInfo.industry) {
				let name1 = this.industryList.filter(res => res.id == this.userInfo.industry)[0].name;
				this.industry = {
					name: name1,
					id: +this.userInfo.industry
				};
			}
			this.company = this.userInfo.company;
			this.income = this.userInfo.income;
			this.hobby = this.userInfo.hobby;
			this.wechat = this.userInfo.wechat;
			this.mobile = this.follow_remark_mobiles;
			this.qq = this.userInfo.qq;
			this.email = this.userInfo.email;
			if (this.userInfo.intention) {
				let name2 = this.intention.filter(res => res.id == this.userInfo.intention)[0].name;
				this.intent = {
					name: name2,
					id: +this.userInfo.intention
				};
			}
			this.note = this.follow_remark;
			this.photo = this.userInfo.photo;
			if (this.photo) {
				this.uploader = [
					{
						url: this.photo
					}
				];
			} else {
				this.uploader = [];
			}
		},
		onSubmit() {
			Toast.loading({
				message: '提交中...',
				forbidClick: true,
				duration: 0
			});
			this.editInfo();
		},
		// 编辑用户画像
		async editInfo() {
			var params = {
				name: this.name,
				intention: this.intent.id,
				gender: this.gender,
				age: this.age,
				email: this.email,
				industry: this.industry.id,
				birthday: this.birthday,
				area: this.area,
				qq: this.qq,
				hobby: this.hobby,
				wechat: this.wechat,
				income: this.income,
				company: this.company,
				photo: this.photo,
				address: this.address
			};
			this.mobile ? (params.follow_remark_mobiles = this.mobile) : '';
			this.note ? (params.follow_remark = this.note) : '';
			params.external_user_id = sessionStorage.getItem('external_user_id');
			params.follow_userid = localStorage.getItem('huankemao_user_id');
			const { code, msg } = await editPortrait(params);
			if (code === 200) {
				Toast.success(msg);
				this.$router.replace('/detail');
			} else {
				Toast.fail(msg);
			}
		},
		onBirthday(value) {
			this.birthday = this.$dateFormat(value, 'yyyy-MM-dd');
			this.showDate = false;
		},
		onArea(value) {
			var areaArr = [];
			for (let item of value) {
				areaArr.push(item.name);
			}
			this.area = areaArr.join('/');
			this.showArea = false;
		},
		onIndustry(value) {
			this.industry = value;
			this.showIndustry = false;
		},
		onSource(value) {
			this.source = value;
			this.showSource = false;
		},
		onIntention(value) {
			this.intent = value;
			this.showIntention = false;
		},
		handleOpenCalendar() {
			this.defaultDate = this.birthday ? new Date(this.birthday) : null;
		},
		async afterUpload(file) {
			Toast.loading({
				message: '上传中...',
				forbidClick: true,
				duration: 0
			});
			const { data } = await this.$uploadImg(file.file);
			if (data.code === 200) {
				Toast.success(data.msg);
				this.photo = data.data;
			} else {
				Toast.fail(data.msg);
			}
		},
		uploadDelete() {
			this.photo = '';
		}
	}
};
</script>
